<template>
  <div class="my-page">
    <el-card shadow="never">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formRef">
        <el-form-item label="会员ID">
          <el-input v-model="formInline.vipId" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formInline.phone" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="会员等级">
          <el-select v-model="formInline.level" placeholder="请选择">
            <el-option label="普通会员" value="1" />
            <el-option label="钻石会员" value="2" />
            <el-option label="黑卡会员" value="3" />
            <el-option label="超级卡" value="4" />
            <el-option label="青铜会员" value="5" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.status" placeholder="请选择">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="default" @click="reset" round>重置</el-button>
          <el-button type="primary" @click="search" round>查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" class="mg-tp12 card-box">
      <template #header>
        <div class="card-header">
          <span>团队列表</span>
        </div>
      </template>
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column label="会员ID" prop="id" width="100" align="center" />
        <el-table-column label="头像" prop="avater" width="100" :formatter="formatter" align="center">
          <template #default="scope">
            <img :src="scope.row.avater" v-if="scope.row.avater" style="width: 50px; height: 50px;" /></template>
        </el-table-column>
        <el-table-column label="用户ID" prop="account" width="180" />
        <el-table-column label="用户昵称" prop="nickName" />
        <el-table-column label="手机号" prop="mobile" width="180" :formatter="formatterMobile" align="center" />
        <el-table-column label="是否为代理" prop="role" width="180" align="center">
          <template #default="scope">{{
            scope.row.role == 0 ? "否" : "是"
          }}</template>
        </el-table-column>
        <el-table-column label="金币" prop="money" align="center" />
        <el-table-column label="钻石" prop="diamond" width="180" align="center" />
        <el-table-column label="状态" prop="status" width="180" align="center">
          <template #default="scope">{{
            scope.row.status == 0 ? "否" : "是"
          }}</template>
        </el-table-column>
        <el-table-column label="活跃时间" prop="loginTime" width="180" align="center">
          <template #default="scope">{{
            scope.row.loginTime
          }}</template>
        </el-table-column>
        <el-table-column label="邀请码" prop="inviteCode" width="100" align="center" />

        <el-table-column label="状态" prop="status" align="center">
          <template #default="scope">{{
            scope.row.status == 0 ? "可用" : "禁用"
          }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button :icon="View" circle @click="handleClick(scope.row)"></el-button>
            <el-button :icon="Edit" circle @click="toEdit(scope.row)"></el-button>
            <el-button :icon="Delete" circle @click="handleDel(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="mg-tp12" :page-sizes="[15, 50, 100, 200]" v-model:current-page="pageNum" :page-size="pageSize"
        small="small" layout="sizes,total, prev, pager, next" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-card>
  </div>
</template>
      
<script>
import { Delete, Edit, View, Search } from "@element-plus/icons-vue";
import { search, del } from "../../../api/member.js";
import { defineComponent, reactive, ref, toRefs } from "vue";
export default defineComponent({
  setup() {
    const state = reactive({
      formInline: {
        id: "",
        nickName: "",
        role: "",
        status: "",
        parentId: "",
      },
      tableData: [],
      pageSize: 15,
      pageNum: 1,
      total: 100,
      loading: false,
    });

    const formRef = ref(null);


    return {
      formRef,
      ...toRefs(state),
      Edit,
      Delete,
      View,
      Search,
      // search,
      // ...toRefs(state),
    
    };
  },
  created() {
    debugger
    let { pageNum = 1, pageSize = 15} = this.$route.query;
    this.formInline.parentId = this.$route.params.id
    this.pageNum = +pageNum;
    // this.queryCategory();
    this.search();
  },
  methods: {
    //查询
    async search() {
      try {
        this.loading = true;
        let res = await search(this.pageNum, this.formInline.id, this.formInline.nickName, this.formInline.role, this.formInline.status,this.formInline.parentId, this.pageSize);
        if (res.code === 200) {
          console.error(res);
          this.tableData = [...res.data.list];
          this.total = res.data.count;
          this.loading = false;
        }
      } catch (error) {
        console.log(error);
      }
    },
    handleSizeChange(val) {
      this.pageSize = val.pageSize;
      this.search();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.pageNum = val;
      this.search();
    },
    formatter(row, column) {
      console.log(row, column)
      return row.avater == "" || !row.avater ? "无" : row.avater;
    },
    formatterMobile(row, column) {
      console.log(row, column)
      return row.mobile == "" || !row.mobile ? "无" : row.mobile;
    },
    addClick() {
      this.isAddVisible = true;
    },
    toEdit(e) {
      let id = e.id;
      this.$router.push({ name: "memberEdit", params: { id: id } });
    },
    handleClick(e) {
      let id = e.id;
      this.$router.push({ name: "memberPoints", params: { id: id } });
    },
    delSome() {
      let ids = this.multipleSelection.map((item) => {
        return item.id;
      });
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await del(ids.join(","));
          if (res.code === 200) {
            this.$message({
              message: "删除成功 ^_^",
              type: "success",
            });
            this.search();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除文章
    async handleDel(e) {
      let id = e.id;
      try {
        let res = await del(id);
        if (res.code === 200) {
          this.$message({
            message: "会员删除成功 ^_^",
            type: "success",
          });
          this.search();
        }
      } catch (error) {
        console.log(error);
      }
    },

  }
});
</script>
      
<style scoped>
.mg-tp12 {
  margin-top: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
      
      